<script setup>
import mainAside from './component/main-aside.vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import cache from '@/util/cache.js'
import { computed, ref } from 'vue'
const store = useStore()
const router = useRouter()
const handOutClick = () => {
  cache.deleteCache('jxcms-token')
  cache.deleteCache('jxcms-user')
  router.push('/login')
}
const isCollapse = ref(false)
const handCollapseClick = () => {
  isCollapse.value = !isCollapse.value
}
store.dispatch('requestSonCom')
const sonComList = computed(() => {
  return store.state.sonCom.sonComList
})
//请求员工数据
store.dispatch('requestAllUser', 1)
const userList = computed(() => {
  return store.state.user.userList
})
//定义图片上传地址
const imgRequestUrl = ref('')
//表单上传时候的数据
const formData = ref('')
const ruleFormRef = ref(null)
const dialogFormVisible = ref(false)
const isAdd = ref('')
const produceVisible = ref(false)
const formLabelAlign = ref({
  scName: '',
  scMan: '',
  scTel: '',
  scWebUrl: '',
  uId: ''
})
const handAddClick = () => {
  isAdd.value = 'add'
  formLabelAlign.value = {
    scName: '',
    scMan: '',
    scTel: '',
    scWebUrl: '',
    uId: ''
  }
  dialogFormVisible.value = true
}
const handAddReqClick = async () => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (isAdd.value === 'add') {
        // store.dispatch('addRequestNav', formLabelAlign.value)
        imgRequestUrl.value = 'http://localhost:9999/api/sonCom/addSC.php'
        formData.value = formLabelAlign.value
        uploadRef.value.submit()
        isAdd.value = ''
        store.dispatch('requestSonCom')
      } else {
        //编辑时提交
        // store.dispatch('EditRequestNav', formLabelAlign.value)
        imgRequestUrl.value = 'http://localhost:9999/api/sonCom/updateSC.php'
        formData.value = formLabelAlign.value
        uploadRef.value.submit()
      }
      formLabelAlign.value = {
        scName: '',
        scMan: '',
        scTel: '',
        scWebUrl: '',
        uId: ''
      }
      dialogFormVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}
const handDeteleClick = (item) => {
  store.dispatch('deteleRequestSonCom', item.scId)
}
const rules = ref({
  scName: [{ required: true, message: '必须填写', trigger: 'blur' }],
  scMan: [{ required: true, message: '必须填写', trigger: 'blur' }],
  scTel: [{ required: true, message: '必须填写', trigger: 'blur' }],
  scWebUrl: [{ required: true, message: '必须填写', trigger: 'blur' }],
  uId: [{ required: true, message: '必须填写', trigger: 'blur' }]
})
const handEditClick = (item) => {
  dialogFormVisible.value = true
  formLabelAlign.value = item
}
const handCancelClick = () => {
  dialogFormVisible.value = false
  isAdd.value = ''
}
const uploadRef = ref(null)
//文件上传成功
const sendFileSuccess = (response) => {
  console.log(response)
}
//请求产品数据
store.dispatch('requestProduce')
const produceList = computed(() => {
  return store.state.sonCom.produceList
})
const currentScid = ref('')
const isProduceAdd = ref('')
const produceEditVisible = ref(false)
const formLabelProduce = ref({
  pName: '',
  pFalg: '',
  pImg: '',
  pPrice: '',
  pInfo: '',
  scId: 9
})
const uploadProduceRef = ref(null)
//定义产品图片上传地址
const imgProduceRequestUrl = ref('')
//表单上传时候的数据
const formProduceData = ref('')
const handProduceClick = (item) => {
  currentScid.value = item.scId
  produceVisible.value = true
}
const handAddProduceClick = () => {
  isProduceAdd.value = 'add'
  produceEditVisible.value = true
}
const handCancelProduceClick = () => {
  isProduceAdd.value = ''
  produceEditVisible.value = false
  formLabelProduce.value = {
    pName: '',
    pFalg: '',
    pImg: '',
    pPrice: '',
    pInfo: '',
    scId: ''
  }
}
const handAddProduceReqClick = async () => {
  if (isProduceAdd.value === 'add') {
    imgProduceRequestUrl.value =
      'http://localhost:9999/api/scComProduct/addProduct.php'
    formProduceData.value = formLabelProduce.value
    formProduceData.value.scId = currentScid.value
    uploadProduceRef.value.submit()
    isProduceAdd.value = ''
    store.dispatch('requestProduce')
  } else {
    //编辑时提交
    imgProduceRequestUrl.value =
      'http://localhost:9999/api/scComProduct/updateProduct.php'
    formProduceData.value = formLabelProduce.value
    formProduceData.value.scId = currentScid.value
    uploadProduceRef.value.submit()
    store.dispatch('requestProduce')
  }
  formLabelProduce.value = {
    pName: '',
    pFalg: '',
    pImg: '',
    pPrice: '',
    pInfo: '',
    scId: currentScid.value
  }
  produceEditVisible.value = false
}
const handEditProduceClick = (item) => {
  produceEditVisible.value = true
  formLabelProduce.value = item
  formLabelProduce.value.scId = currentScid.value
}
const handDeteleProduceClick = (item) => {
  store.dispatch('deteleRequestProduce', item.pId)
}
</script>

<template>
  <div class="sonCom">
    <div class="common-layout">
      <el-container>
        <el-aside :width="isCollapse ? '60px' : '216px'">
          <mainAside :isCollapse="isCollapse"></mainAside>
        </el-aside>
        <el-container>
          <el-header>
            <div class="header">
              <el-icon size="30" @click="handCollapseClick"><Fold /></el-icon>
              <div class="user">
                <img
                  src="https://s1.boluo.link/imgs/2022/12/02/3ac0a824e1fd00cb.jpg"
                />
                <el-dropdown>
                  <span class="el-dropdown-link">
                    <span>{{ store.state.user.userInfo.uName }}</span>
                    <el-icon class="el-icon--right">
                      <arrow-down />
                    </el-icon>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>修改用户信息</el-dropdown-item>
                      <el-dropdown-item divided @click="handOutClick"
                        >退出登录</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </el-header>
          <el-main>
            <div class="main">
              <div class="addBtn">
                <el-button type="primary" @click="handAddClick"
                  >添加公司</el-button
                >
                <!--                添加弹出框-->
                <el-dialog
                  v-model="dialogFormVisible"
                  :close-on-click-modal="false"
                  :title="isAdd == 'add' ? '添加公司' : '编辑公司'"
                  :show-close="false"
                  width="30%"
                  center
                >
                  <el-form
                    ref="ruleFormRef"
                    :rules="rules"
                    label-width="100px"
                    :model="formLabelAlign"
                    hide-required-asterisk
                  >
                    <el-form-item label="子公司名称" prop="scName">
                      <el-input v-model="formLabelAlign.scName" />
                    </el-form-item>
                    <el-form-item label="联系人" prop="scMan">
                      <el-input v-model="formLabelAlign.scMan" />
                    </el-form-item>
                    <el-form-item label="联系人电话" prop="scTel">
                      <el-input v-model="formLabelAlign.scTel" />
                    </el-form-item>
                    <el-form-item label="子公司网址" prop="scWebUrl">
                      <el-input v-model="formLabelAlign.scWebUrl" />
                    </el-form-item>
                    <el-form-item label="子公司管理人" prop="uId">
                      <el-select
                        v-model="formLabelAlign.uId"
                        placeholder="选择角色"
                      >
                        <el-option
                          v-for="item in userList"
                          :key="item.uId"
                          :value="item.uId"
                          :label="item.uName"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="子公司logo">
                      <el-upload
                        ref="uploadRef"
                        :action="imgRequestUrl"
                        :limit="1"
                        method="post"
                        :on-success="sendFileSuccess"
                        :data="formData"
                        :auto-upload="false"
                      >
                        <el-button type="primary">上传图片</el-button>
                      </el-upload>
                    </el-form-item>
                  </el-form>

                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="handCancelClick">取消</el-button>
                      <el-button type="primary" @click="handAddReqClick">
                        添加
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
              </div>
              <div class="tableBox">
                <el-table :data="sonComList" style="width: 100%">
                  <el-table-column
                    label="序号"
                    type="index"
                    align="center"
                    width="120"
                  />
                  <el-table-column
                    prop="scName"
                    label="子公司名称"
                    min-width="120"
                    align="center"
                  />
                  <el-table-column
                    prop="scMan"
                    label="联系人"
                    min-width="120"
                    align="center"
                  />
                  <el-table-column
                    prop="scTel"
                    label="联系人电话"
                    min-width="120"
                    align="center"
                  />
                  <el-table-column
                    prop="uName"
                    label="负责人"
                    min-width="120"
                    align="center"
                  />
                  <el-table-column
                    label="子公司网址"
                    min-width="120"
                    align="center"
                  >
                    <template #default="scope">
                      <el-link :href="scope.row.scWebUrl" target="_blank">
                        <el-image
                          style="width: 50px; height: 50px"
                          :src="
                            'http://localhost:9999/api/upload/' +
                            scope.row.scLogo
                          "
                        />
                      </el-link>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="280" align="center">
                    <template #default="scope">
                      <el-button
                        type="primary"
                        @click="handEditClick(scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="danger"
                        @click="handDeteleClick(scope.row)"
                        >删除</el-button
                      >
                      <el-button
                        type="success"
                        @click="handProduceClick(scope.row)"
                        >产品</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="produceBox">
                <el-dialog
                  v-model="produceVisible"
                  :close-on-click-modal="false"
                  title="产品列表"
                  show-close
                  width="80%"
                  center
                >
                  <el-button type="primary" @click="handAddProduceClick"
                    >添加产品</el-button
                  >
                  <el-table :data="produceList" style="width: 100%">
                    <el-table-column
                      prop="pName"
                      label="名称"
                      min-width="120"
                      align="center"
                    />
                    <el-table-column
                      prop="pFalg"
                      label="规格"
                      min-width="120"
                      align="center"
                    />
                    <el-table-column
                      prop="pPrice"
                      label="价格"
                      min-width="120"
                      align="center"
                    />
                    <el-table-column
                      label="图片"
                      min-width="120"
                      align="center"
                    >
                      <template #default="scope">
                        <el-image
                          style="width: 50px; height: 50px"
                          :preview-src-list="[
                            'http://localhost:9999/api/upload/' + scope.row.pImg
                          ]"
                          :src="
                            'http://localhost:9999/api/upload/' + scope.row.pImg
                          "
                          preview-teleported
                        />
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="280" align="center">
                      <template #default="scope">
                        <el-button
                          type="primary"
                          @click="handEditProduceClick(scope.row)"
                          >编辑</el-button
                        >
                        <el-button
                          type="danger"
                          @click="handDeteleProduceClick(scope.row)"
                          >删除</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-dialog>
                <!--                添加产品弹窗-->
                <el-dialog
                  v-model="produceEditVisible"
                  :close-on-click-modal="false"
                  :title="isProduceAdd == 'add' ? '添加产品' : '编辑产品'"
                  :show-close="false"
                  width="30%"
                  center
                >
                  <el-form
                    ref="ruleFormRef"
                    label-width="100px"
                    :model="formLabelProduce"
                    hide-required-asterisk
                  >
                    <el-form-item label="产品名称">
                      <el-input v-model="formLabelProduce.pName" />
                    </el-form-item>
                    <el-form-item label="产品规格">
                      <el-select
                        v-model="formLabelProduce.pFalg"
                        placeholder="选择规格"
                      >
                        <el-option value="60*60*60" label="60*60*60" />
                        <el-option value="120*120*120" label="120*120*120" />
                        <el-option value="400*400*400" label="400*400*400" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="产品价格">
                      <el-input v-model="formLabelProduce.pPrice" />
                    </el-form-item>
                    <el-form-item label="产品描述">
                      <el-input v-model="formLabelProduce.pInfo" />
                    </el-form-item>
                    <el-form-item label="产品图片">
                      <el-upload
                        ref="uploadProduceRef"
                        :action="imgProduceRequestUrl"
                        :limit="1"
                        method="post"
                        :on-success="sendFileSuccess"
                        :data="formProduceData"
                        :auto-upload="false"
                      >
                        <el-button type="primary">上传图片</el-button>
                      </el-upload>
                    </el-form-item>
                  </el-form>

                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="handCancelProduceClick"
                        >取消</el-button
                      >
                      <el-button type="primary" @click="handAddProduceReqClick">
                        添加
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
              </div>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<style lang="less" scoped>
.el-select {
  width: 100%;
}
.el-aside {
  transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -moz-transition: width 0.15s;
  -webkit-transition: width 0.15s;
  -o-transition: width 0.15s;
}
:deep(.el-aside) {
  margin-right: 6px;
  box-shadow: 6px 0 15px rgba(119, 119, 119, 0.1);
}
.el-header {
  height: 52px;
  background: #fff;
}
.el-main {
  background: #f3f5f8;
}
.el-icon {
  cursor: pointer;
}
.header {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .user {
    display: flex;
    align-items: center;
    margin-right: 30px;
    img {
      margin-right: 10px;
      width: 34px;
      height: 34px;
      border-radius: 10px;
    }
  }
}
.main {
  .tableBox {
    margin-top: 20px;
    background: #fff;
    box-shadow: 6px 0 15px rgba(119, 119, 119, 0.1);
  }
}
</style>
